<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>filter a feature layer(过滤要素图层)</title>
    <style>
        html,body,#viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.17/esri/css/main.css">
    <script src="https://js.arcgis.com/4.17/"></script>
    <script>
        require([
            'esri/Map',
            'esri/views/MapView',
            'esri/layers/FeatureLayer'
        ],function(Map,MapView,FeatureLayer){
            var map = new Map({
                basemap:"topo-vector"
            });

            var view = new MapView({
                container:"viewDiv",
                map:map,
                center:[-118.80543,34.02700],
                zoom:13
            });
            // 地图点击操作
            // view.on("click",function(e){
            //     console.log(e)
            // })
            var featureLayer = new FeatureLayer({
                url:
                    "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails_Styled/FeatureServer/0",
                outFields: ["*"],//Return all fields so it can be queried client-side
                //outFields:[],用于数据的返回，以便在客户端查询
                // 启用弹出窗口
                popupTemplate: {
                    title: "{TRL_NAME}",  // 展示属性值
                    content:"The trail elevation gain is {ELEV_GAIN} ft." //在弹出窗口中显示
                }
            });
            map.add(featureLayer);

            // 创建SQL表达式
            var sqlExpressions = [
                "TRL_ID = 0",
                "TRL_ID > 0",
                "USE_BIKE = 'Yes'",
                "USE_BIKE = 'No'",
                "ELEV_GAIN < 1000",
                "ELEV_GAIN > 1000",
                "TRL_NAME = 'California Coastal Trail'"
            ];
            var selectFilter = document.createElement("select");
            // setAttribute 添加指定的属性，并为其赋指定的值
            selectFilter.setAttribute("class", "esri-widget esri-select");
            selectFilter.setAttribute(
                "style",
                "width: 275px; font-family: Avenir Next W00; font-size: 1em;"
            );
            sqlExpressions.forEach(function(sql) {
                var option = document.createElement("option");
                option.value = sql;
                option.innerHTML = sql;
                selectFilter.appendChild(option);
            });
            view.ui.add(selectFilter,"top-right");

            //未应用任何筛选器，将显示所有数据
            selectFilter.addEventListener('change', function (event) {
                // Server side 服务器端
                //setFeatureLayerFilter(event.target.value);
                // Client side 客户端
                setFeatureLayerViewFilter(event.target.value);
            });
            // Server-side filter 服务器端过滤
            function setFeatureLayerFilter(expression) {
                featureLayer.definitionExpression = expression;
            }
            // Client-side filter
            function setFeatureLayerViewFilter(expression) {
                view.whenLayerView(featureLayer).then(function(featureLayerView){
                    featureLayerView.filter = {
                        where: expression
                    }    
                })
            }
            //
            //设置排除功能的样式
            //
            //过滤要素图层时，将仅显示符合条件的要素。
            //如果要显示“排除”功能以供参考，可以在effect上设置属性FeatureLayerView。
            //此属性需要使用filter和excludedEffect来  设置样式  和  绘制排除的特征。

            // function setFeatureLayerViewFilter(expression) {
            //     view.whenLayerView(featureLayer).then(function (featureLayerView) {
            //         //*** UPDATE ***//
            //         // featureLayerView.filter = {
            //         //   where: expression
            //         // };
            //         featureLayerView.effect = {
            //         filter: {
            //             where: expression
            //         },
            //         excludedEffect: "opacity(50%)"
            //         };
            //     });
            // }

            //
            //查找并突出显示功能
            //
            //过滤的另一种形式是使用上的hitTest方法在view给定的屏幕位置查找特征。
            //经过view和FeatureLayerView准备，利用hitTest查找和highlight功能光标已经结束。
            //hitTest会返回所有可见图层的特征，因此有必要过滤感兴趣图层的结果。

            //注意：高亮显示功能不会向地图添加新图形，而只是将高亮显示功能作为的一部分FeatureLayerView。
            //该highlightOptions属性可用于更改用于突出显示功能的颜色。
            
            // var highlight;
            // view.whenLayerView(featureLayer).then(function (featureLayerView) {
            //     view.on("pointer-move", function (event) {
            //         view.hitTest(event).then(function (response) {
            //         // Only return features for the feature layer
            //         var feature = response.results.filter(function (result) {
            //             return result.graphic.layer === featureLayer;
            //         })[0].graphic;
            //         if (highlight) {
            //             highlight.remove();
            //         }
            //         // Highlight feature
            //         highlight = featureLayerView.highlight(feature);
            //         });
            //     });
            // });
            
        })
    </script>
</head>
<body>
    <div id="viewDiv"></div>
</body>
</html>